<template>
    <div class="w-full h-full flex justify-center items-center">
        <n-form ref="formRef" :model="subForm" :rules="rules" label-placement="left" label-width="auto"
            require-mark-placement="right-hanging" size="small" :style="{ maxWidth: '640px', }">
            <n-form-item label="昵称：" path="nickname">
                <n-input v-model:value="subForm.nickname" placeholder="请输入昵称" />
            </n-form-item>
            <n-form-item label="头像：" path="avatar">
                <n-upload v-model:value="subForm.avatar" :custom-request="upload" :show-file-list="false"
                    :accept="'image/*'">
                    <n-avatar round :size="100" :src="subForm.avatar" object-fit="cover" />
                </n-upload>
            </n-form-item>
            <n-form-item class="flex justify-center items-center">
                <n-button type="primary" @click="sub">提交</n-button>
            </n-form-item>
        </n-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useAuthStore } from '@/stores/user';
import { requestMethod } from '@/hooks/upLoad'
import { useMessage } from 'naive-ui'
import { reqUpdateUserInfo } from '@/api/login/index'
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler';
const message = useMessage()
const formRef = ref(null)
const authStore = useAuthStore();
const $emit = defineEmits(['update:show'])
const subForm = reactive({
    id:authStore.user?.id,
    nickname: authStore.user?.nickname,
    avatar: authStore.user?.avatar,
})
const rules = {
    nickname: [
        {
            required: true,
            message: '昵称不能为空',
            trigger: 'change'
        }
    ]
};
// 上传
const upload = async (e: any) => {
    let res = await requestMethod(e)
    res.status == 'success' ?
        (subForm.avatar = res.data.url) : message.error("上传失败")
}
const sub = () => {
    if (formRef.value) {
        // @ts-ignore
        formRef.value.validate(async (valid: any) => {
            if (!valid) {
                let res = await AsyncTaskHandler.handleSingleTask(reqUpdateUserInfo(subForm))
                if (res.code === 0) {
                    message.success(res.data)
                    authStore.updateUserInfo(subForm)
                    $emit('update:show', false)
                } else {
                    message.error(res.error)
                }
            } else {
                message.error('表单验证失败')
            }
        })
    }

}
</script>

<style lang="scss" scoped>

:deep(.n-button) {
    --n-color: var(--common-color) !important;
    --n-color-hover: var(--common-color) !important;
    --n-color-pressed: var(--common-color) !important;
    --n-border-color: var(--common-color) !important;
    --n-border-color-hover: var(--common-color) !important;
    --n-border-color-pressed: var(--common-color) !important;
    --n-border: 1px solid var(--common-color) !important;
    --n-border-hover: 1px solid var(--common-color) !important;
    --n-border-pressed: 1px solid var(--common-color) !important;
    --n-border-focus: 1px solid var(--common-color) !important;
    --n-border-disabled: 1px solid var(--common-color) !important;
    --n-color-focus: var(--common-color) !important;

}
</style>